<div class="modal-header">
    <button type="button" class="close" aria-label="Close" ng-click="$ctrl.close()"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title">Manage Permissions</h4>
</div>
<div class="modal-body">
  <div style="overflow: auto; height: 300px">
    <ui-select ng-model="$ctrl.newGrantees.selected" on-select="$ctrl.addGrantee($item)">
       <ui-select-match placeholder="Add New User"></ui-select-match>
       <ui-select-choices repeat="user in $ctrl.foundUsers | filter:$select.search"
                         refresh="$ctrl.findUser($select.search)"
                         refresh-delay="0"
                         ui-disable-choice="user.alreadyGrantee">
        <div class="d-flex align-items-center">
          <img ng-src="{{ user.profile_image_url }}" class="profile__image" height="24px">&nbsp;
          <span ng-class="{'text-muted': user.is_disabled}">{{user.name}}</span>
          &nbsp;<small ng-if="user.alreadyGrantee">(already has permission)</small>
        </div>
       </ui-select-choices>
    </ui-select>
      <br>
      <h5>Who has access</h5>
       <table class="table table-condensed table-hover table--permission">
        <thead>
          <tr>
            <th></th>
            <th>User</th>
            <th>Permission</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
        <tr>
          <td width="32px"><img ng-src="{{ $ctrl.owner.profile_image_url }}" class="profile__image" height="32px"/></td>
          <td class="text-muted"> {{ $ctrl.owner.name}}</td>
          <td class="mp__permission-type">Owner</td>
          <td></td>
        </tr>
        <tr ng-repeat="grantee in $ctrl.grantees" ng-if="grantee.id != $ctrl.owner.id">
          <td width="32px"><img ng-src="{{ grantee.profile_image_url }}" class="profile__image" height="32px"/></td>
          <td ng-class="{'text-muted': grantee.is_disabled}">{{grantee.name}}</td>
          <td class="mp__permission-type">{{grantee.access_type}}</td>
          <td><button class="pull-right btn btn-sm btn-danger" ng-click="$ctrl.removeGrantee(grantee)">Remove</button></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
